<script setup lang="ts">
import {nextTick, onMounted, ref} from 'vue'
import AddOrUpdate from './firstParty-add-or-update.vue'
import borrowingRecordReturn from "./borrowingRecordReturn.vue"
import {ElMessage} from 'element-plus'
import {PageParams} from '@/utils/http/types'
import {PageParamsC} from '@/utils/http/class'
import {deleteFirstParties, listFirstParties} from '@/api/firstParty'
import {listBorrowingRecords} from '@/api/borrowingRecord'

onMounted(() => {
  getDataList()
})
const dataList = ref<Required<BorrowingRecord>[]>()

const filterData = ref<Partial<BorrowingRecord>>({
  borrowingName: '',
})

const pageParams = ref<PageParams>(new PageParamsC())

const total = ref(0)

const dataListLoading = ref(false)

// 获取数据列表
async function getDataList() {
  dataListLoading.value = true

  const data = await listBorrowingRecords(pageParams.value, filterData.value)

  dataList.value = data.records
  total.value = data.total

  dataListLoading.value = false
}

// 每页数
function sizeChangeHandle(val: number) {
  pageParams.value.pageSize = val
  pageParams.value.page = 1
  getDataList()
}

// 当前页
function currentChangeHandle(val: number) {
  pageParams.value.page = val
  getDataList()
}

// 多选
const dataListSelections = ref([])

function selectionChangeHandle(val: any) {
  dataListSelections.value = val
}

const visible = ref(false)
const dialogRef = ref()

// 归还
function borrowingRecordReturnHandle(id: number) {
  // visible.value = true;
  // nextTick(() => {
  //   dialogRef.value .init(id);
  // });
}
</script>

<template>
  <div class="mod-config">
    <el-form
      :inline="true"
      :model="filterData"
      @keyup.enter="getDataList()"
    >
      <el-form-item>
        <el-input
          v-model="filterData.borrowingName"
          placeholder="借阅人姓名"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="dataListLoading"
      :data="dataList"
      border
      style="width: 100%;"
      @selection-change="selectionChangeHandle"
    >
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50"
      />
      <el-table-column
        label="序号"
        type="index"
        width="60"
        align="center">
        <template v-slot="scope">
          <span>{{(pageParams.page - 1) * pageParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="contractId"
        header-align="center"
        align="center"
        label="合同id"
      />
      <el-table-column
        prop="borrowingName"
        header-align="center"
        align="center"
        label="借阅人"
      >
        <template v-slot="scope">
          <el-tag type="success">{{ scope.row.borrowingName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="borrowingTime"
        header-align="center"
        align="center"
        label="借阅时间"
      />
      <el-table-column
        prop="returnName"
        header-align="center"
        align="center"
        label="归还人"
      >
        <template v-slot="scope">
          <el-tag v-if="scope.row.returnName" type="success">{{ scope.row.returnName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="returnTime"
        header-align="center"
        align="center"
        label="归还时间"
      />
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作"
      >
        <template v-slot="scope">
          <el-tag v-if="scope.row.returnPersonId" type="success">在库</el-tag>
          <el-button
            v-else
            type="danger"
            size="small"
            @click="borrowingRecordReturnHandle(scope.row.id)"
          >归还
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="pageParams.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageParams.pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 20px"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
    />

    <!-- 弹窗, 归还 -->
    <borrowingRecordReturn
      v-if="visible"
      ref="dialogRef"
      @refreshDataList="getDataList"
    />
  </div>
</template>
